// Markdown 预览工具渲染器
window.MarkdownPreviewRenderer = class MarkdownPreviewRenderer {
    static getHTML() {
        return `
            <h2 class="text-3xl font-bold text-gray-800 mb-6">
                <i data-feather="file-text" class="w-8 h-8 inline mr-3 text-emerald-600"></i>
                Markdown 预览器
            </h2>
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                <p class="text-gray-600">实时预览和编辑Markdown文档，支持GitHub风格语法和导出功能。</p>
            </div>
            
            <!-- 工具栏 -->
            <div class="bg-white rounded-xl shadow-sm border p-4 mb-6">
                <div class="flex flex-wrap gap-3 mb-4">
                    <!-- 文档操作 -->
                    <button 
                        id="preview-markdown" 
                        class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="eye" class="w-4 h-4 mr-2"></i>
                        预览
                    </button>
                    <button 
                        id="validate-markdown" 
                        class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="check-circle" class="w-4 h-4 mr-2"></i>
                        验证
                    </button>
                    <button 
                        id="generate-toc" 
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="list" class="w-4 h-4 mr-2"></i>
                        目录
                    </button>
                    
                    <!-- 模板选择 -->
                    <select 
                        id="template-select" 
                        class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                        <option value="">选择模板...</option>
                        <option value="readme">README模板</option>
                        <option value="api-doc">API文档模板</option>
                        <option value="blog">博客文章模板</option>
                    </select>
                    
                    <!-- 导出功能 -->
                    <button 
                        id="export-html" 
                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="download" class="w-4 h-4 mr-2"></i>
                        导出HTML
                    </button>
                    <button 
                        id="copy-html" 
                        class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="copy" class="w-4 h-4 mr-2"></i>
                        复制HTML
                    </button>
                    <button 
                        id="clear-markdown" 
                        class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center"
                    >
                        <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
                        清空
                    </button>
                </div>

                <!-- 视图切换 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="flex bg-gray-100 rounded-lg p-1">
                            <button id="tab-edit" class="px-4 py-2 rounded-md transition duration-200 font-medium text-sm bg-emerald-600 text-white">
                                编辑
                            </button>
                            <button id="tab-preview" class="px-4 py-2 rounded-md transition duration-200 font-medium text-sm text-gray-600 hover:text-gray-900">
                                预览
                            </button>
                            <button id="tab-split" class="px-4 py-2 rounded-md transition duration-200 font-medium text-sm text-gray-600 hover:text-gray-900">
                                分屏
                            </button>
                        </div>
                    </div>
                    
                    <!-- 统计信息 -->
                    <div id="markdown-stats" class="flex items-center space-x-6 text-sm text-gray-500">
                        <span>字数: <span id="word-count">0</span></span>
                        <span>预计阅读: <span id="reading-time">1</span> 分钟</span>
                    </div>
                </div>
            </div>

            <!-- 编辑和预览区域 -->
            <div class="bg-white rounded-xl shadow-sm border mb-6">
                <!-- 编辑模式 -->
                <div id="edit-view" class="p-6">
                    <textarea 
                        id="markdown-input" 
                        rows="20" 
                        placeholder="在这里输入Markdown内容...

# 示例标题

这是一个**粗体文本**和*斜体文本*的示例。

## 代码示例

\`\`\`javascript
function hello() {
    console.log('Hello, Markdown!');
}
\`\`\`

## 列表

- 列表项1
- 列表项2
- 列表项3

## 链接

[链接文本](https://example.com)

## 引用

> 这是一个引用文本
"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent font-mono text-sm resize-y"
                    ></textarea>
                </div>

                <!-- 预览模式 -->
                <div id="preview-view" class="p-6 hidden">
                    <div id="markdown-preview" class="prose prose-sm max-w-none">
                        <!-- 动态生成的预览内容 -->
                    </div>
                </div>

                <!-- 分屏模式 -->
                <div id="split-view" class="hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
                                <i data-feather="edit-3" class="w-4 h-4 mr-2"></i>
                                Markdown 编辑器
                            </h4>
                            <textarea 
                                id="markdown-input-split" 
                                rows="18" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent font-mono text-sm resize-y"
                            ></textarea>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
                                <i data-feather="eye" class="w-4 h-4 mr-2"></i>
                                实时预览
                            </h4>
                            <div class="border border-gray-300 rounded-lg p-4 min-h-[450px] bg-white overflow-auto">
                                <div id="markdown-preview-split" class="prose prose-sm max-w-none">
                                    <!-- 动态生成的预览内容 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 目录区域 -->
            <div id="toc-section" class="bg-white rounded-xl shadow-sm border p-6 mb-6 hidden">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i data-feather="bookmark" class="w-5 h-5 inline mr-2"></i>
                    文档目录
                </h3>
                <div id="toc-content">
                    <!-- 动态生成的目录 -->
                </div>
            </div>

            <!-- 验证结果区域 -->
            <div id="validation-section" class="bg-white rounded-xl shadow-sm border p-6 hidden">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i data-feather="shield" class="w-5 h-5 inline mr-2"></i>
                    验证结果
                </h3>
                <div id="validation-content">
                    <!-- 动态生成的验证结果 -->
                </div>
            </div>

            <!-- 自定义样式 -->
            <style>
                .prose {
                    line-height: 1.7;
                }
                .prose h1 { 
                    font-size: 2em; 
                    font-weight: 700; 
                    margin-bottom: 1rem;
                    padding-bottom: 0.5rem;
                    border-bottom: 2px solid #e5e7eb;
                    color: #1f2937;
                }
                .prose h2 { 
                    font-size: 1.5em; 
                    font-weight: 600; 
                    margin: 1.5rem 0 1rem 0;
                    padding-bottom: 0.3rem;
                    border-bottom: 1px solid #e5e7eb;
                    color: #374151;
                }
                .prose h3 { 
                    font-size: 1.25em; 
                    font-weight: 600; 
                    margin: 1.2rem 0 0.8rem 0;
                    color: #4b5563;
                }
                .prose h4 { 
                    font-size: 1.125em; 
                    font-weight: 600; 
                    margin: 1rem 0 0.6rem 0;
                    color: #6b7280;
                }
                .prose h5 { 
                    font-size: 1em; 
                    font-weight: 600; 
                    margin: 0.8rem 0 0.5rem 0;
                    color: #6b7280;
                }
                .prose h6 { 
                    font-size: 0.875em; 
                    font-weight: 600; 
                    margin: 0.6rem 0 0.4rem 0;
                    color: #9ca3af;
                }
                .prose p { 
                    margin-bottom: 1rem;
                    color: #374151;
                }
                .prose code {
                    background: #f1f5f9;
                    border: 1px solid #e2e8f0;
                    padding: 0.125rem 0.375rem;
                    border-radius: 0.25rem;
                    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
                    font-size: 0.875em;
                    color: #e11d48;
                    font-weight: 500;
                }
                .prose pre {
                    background: #0f172a;
                    color: #e2e8f0;
                    padding: 1.25rem;
                    border-radius: 0.5rem;
                    overflow-x: auto;
                    margin: 1.5rem 0;
                    border: 1px solid #1e293b;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    position: relative;
                }
                .prose pre code {
                    background: transparent;
                    color: inherit;
                    padding: 0;
                    border-radius: 0;
                    font-size: 0.875em;
                    border: none;
                    font-weight: normal;
                    line-height: 1.7;
                }
                /* JavaScript 系列 */
                .prose pre code.language-javascript,
                .prose pre code.language-js {
                    color: #fbbf24;
                }
                .prose pre code.language-typescript,
                .prose pre code.language-ts {
                    color: #3b82f6;
                }
                .prose pre code.language-nodejs,
                .prose pre code.language-node {
                    color: #10b981;
                }
                
                /* Python */
                .prose pre code.language-python,
                .prose pre code.language-py {
                    color: #60a5fa;
                }
                
                /* Web 技术 */
                .prose pre code.language-html {
                    color: #f97316;
                }
                .prose pre code.language-css {
                    color: #06b6d4;
                }
                .prose pre code.language-scss,
                .prose pre code.language-sass {
                    color: #ec4899;
                }
                
                /* .NET 系列 */
                .prose pre code.language-csharp,
                .prose pre code.language-cs,
                .prose pre code.language-c# {
                    color: #8b5cf6;
                }
                .prose pre code.language-vb,
                .prose pre code.language-vbnet {
                    color: #a855f7;
                }
                .prose pre code.language-fsharp,
                .prose pre code.language-fs {
                    color: #7c3aed;
                }
                
                /* Java 系列 */
                .prose pre code.language-java {
                    color: #dc2626;
                }
                .prose pre code.language-kotlin {
                    color: #7c2d12;
                }
                .prose pre code.language-scala {
                    color: #991b1b;
                }
                
                /* C/C++ */
                .prose pre code.language-c {
                    color: #374151;
                }
                .prose pre code.language-cpp,
                .prose pre code.language-c++ {
                    color: #1f2937;
                }
                
                /* PHP */
                .prose pre code.language-php {
                    color: #7c3aed;
                }
                
                /* Ruby */
                .prose pre code.language-ruby,
                .prose pre code.language-rb {
                    color: #dc2626;
                }
                
                /* Go */
                .prose pre code.language-go,
                .prose pre code.language-golang {
                    color: #0ea5e9;
                }
                
                /* Rust */
                .prose pre code.language-rust,
                .prose pre code.language-rs {
                    color: #b45309;
                }
                
                /* Swift */
                .prose pre code.language-swift {
                    color: #f97316;
                }
                
                /* Shell/Bash */
                .prose pre code.language-bash,
                .prose pre code.language-shell,
                .prose pre code.language-sh {
                    color: #16a34a;
                }
                .prose pre code.language-powershell,
                .prose pre code.language-ps1 {
                    color: #2563eb;
                }
                
                /* 数据格式 */
                .prose pre code.language-json {
                    color: #a78bfa;
                }
                .prose pre code.language-xml {
                    color: #ea580c;
                }
                .prose pre code.language-yaml,
                .prose pre code.language-yml {
                    color: #059669;
                }
                .prose pre code.language-toml {
                    color: #0891b2;
                }
                
                /* SQL */
                .prose pre code.language-sql {
                    color: #dc2626;
                }
                .prose pre code.language-mysql {
                    color: #f97316;
                }
                .prose pre code.language-postgresql,
                .prose pre code.language-postgres {
                    color: #2563eb;
                }
                
                /* 其他语言 */
                .prose pre code.language-dart {
                    color: #0ea5e9;
                }
                .prose pre code.language-lua {
                    color: #1e40af;
                }
                .prose pre code.language-r {
                    color: #2563eb;
                }
                .prose pre code.language-matlab {
                    color: #ea580c;
                }
                
                /* 标记语言 */
                .prose pre code.language-markdown,
                .prose pre code.language-md {
                    color: #374151;
                }
                .prose pre code.language-latex {
                    color: #059669;
                }
                .prose blockquote {
                    border-left: 4px solid #059669;
                    padding-left: 1rem;
                    margin: 1rem 0;
                    color: #6b7280;
                    font-style: italic;
                    background: #f0fdf4;
                    padding: 1rem;
                    border-radius: 0.5rem;
                }
                .prose ul, .prose ol {
                    margin: 1rem 0;
                    padding-left: 2rem;
                }
                .prose li {
                    margin: 0.5rem 0;
                    color: #374151;
                }
                .prose .markdown-table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 1rem 0;
                    font-size: 0.9em;
                }
                .prose .markdown-table th,
                .prose .markdown-table td {
                    border: 1px solid #d1d5db;
                    padding: 0.75rem;
                    text-align: left;
                }
                .prose .markdown-table th {
                    background: #f9fafb;
                    font-weight: 600;
                    color: #374151;
                }
                .prose .markdown-table tr:nth-child(even) {
                    background: #f9fafb;
                }
                .prose a {
                    color: #059669;
                    text-decoration: none;
                }
                .prose a:hover {
                    text-decoration: underline;
                }
                .prose hr {
                    border: none;
                    height: 1px;
                    background: #e5e7eb;
                    margin: 2rem 0;
                }
                .prose img {
                    max-width: 100%;
                    height: auto;
                    border-radius: 0.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    margin: 1rem 0;
                }
                .prose del {
                    color: #6b7280;
                }
                .prose strong {
                    font-weight: 600;
                    color: #1f2937;
                }
                .prose em {
                    font-style: italic;
                    color: #4b5563;
                }
            </style>
        `;
    }

    static init() {
        // DOM 元素
        const markdownInput = document.getElementById('markdown-input');
        const markdownInputSplit = document.getElementById('markdown-input-split');
        const previewDiv = document.getElementById('markdown-preview');
        const previewDivSplit = document.getElementById('markdown-preview-split');
        const templateSelect = document.getElementById('template-select');
        
        // 按钮元素
        const previewBtn = document.getElementById('preview-markdown');
        const validateBtn = document.getElementById('validate-markdown');
        const generateTocBtn = document.getElementById('generate-toc');
        const exportHtmlBtn = document.getElementById('export-html');
        const copyHtmlBtn = document.getElementById('copy-html');
        const clearBtn = document.getElementById('clear-markdown');
        
        // 视图切换按钮
        const tabEditBtn = document.getElementById('tab-edit');
        const tabPreviewBtn = document.getElementById('tab-preview');
        const tabSplitBtn = document.getElementById('tab-split');
        
        // 视图区域
        const editView = document.getElementById('edit-view');
        const previewView = document.getElementById('preview-view');
        const splitView = document.getElementById('split-view');
        
        // 统计元素
        const wordCountSpan = document.getElementById('word-count');
        const readingTimeSpan = document.getElementById('reading-time');

        // 当前视图模式
        let currentView = 'edit';
        let lastProcessedContent = '';

        // 初始化内容
        this.loadExample();

        // 实时预览更新（分屏模式）
        const updatePreview = DevToolsUtils.debounce((content, previewElement) => {
            if (content === lastProcessedContent) return;
            
            const result = MarkdownPreview.parseMarkdown(content);
            if (result.success) {
                previewElement.innerHTML = result.data.html;
                this.updateStats(result.data.wordCount, result.data.readingTime);
                lastProcessedContent = content;
            } else {
                previewElement.innerHTML = `<p class="text-red-500">预览错误: ${result.error}</p>`;
            }
        }, 300);

        // 输入事件监听
        markdownInput.addEventListener('input', (e) => {
            const content = e.target.value;
            markdownInputSplit.value = content;
            if (currentView === 'split') {
                updatePreview(content, previewDivSplit);
            }
        });

        markdownInputSplit.addEventListener('input', (e) => {
            const content = e.target.value;
            markdownInput.value = content;
            updatePreview(content, previewDivSplit);
        });

        // 视图切换
        tabEditBtn.addEventListener('click', () => this.switchView('edit'));
        tabPreviewBtn.addEventListener('click', () => this.switchView('preview'));
        tabSplitBtn.addEventListener('click', () => this.switchView('split'));

        // 预览按钮
        previewBtn.addEventListener('click', () => {
            const content = markdownInput.value.trim();
            if (!content) {
                DevToolsUtils.showToast('请输入Markdown内容', 'error');
                return;
            }

            const result = MarkdownPreview.parseMarkdown(content);
            if (result.success) {
                previewDiv.innerHTML = result.data.html;
                this.switchView('preview');
                DevToolsUtils.showToast('预览已生成', 'success');
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        });

        // 验证按钮
        validateBtn.addEventListener('click', () => {
            const content = markdownInput.value.trim();
            if (!content) {
                DevToolsUtils.showToast('请输入Markdown内容', 'error');
                return;
            }

            const result = MarkdownPreview.validateMarkdown(content);
            if (result.success) {
                this.displayValidationResult(result.data);
                DevToolsUtils.showToast('验证完成', 'success');
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        });

        // 生成目录按钮
        generateTocBtn.addEventListener('click', () => {
            const content = markdownInput.value.trim();
            if (!content) {
                DevToolsUtils.showToast('请输入Markdown内容', 'error');
                return;
            }

            const result = MarkdownPreview.generateTOC(content);
            if (result.success) {
                this.displayTOC(result.data);
                DevToolsUtils.showToast('目录已生成', 'success');
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        });

        // 模板选择
        templateSelect.addEventListener('change', (e) => {
            if (e.target.value) {
                const templatesResult = MarkdownPreview.getTemplates();
                if (templatesResult.success) {
                    const template = templatesResult.data[e.target.value];
                    if (template) {
                        markdownInput.value = template.content;
                        markdownInputSplit.value = template.content;
                        if (currentView === 'split') {
                            updatePreview(template.content, previewDivSplit);
                        }
                        DevToolsUtils.showToast(`已加载 ${template.name}`, 'success');
                    }
                }
                e.target.value = '';
            }
        });

        // 导出HTML
        exportHtmlBtn.addEventListener('click', () => {
            const content = markdownInput.value.trim();
            if (!content) {
                DevToolsUtils.showToast('请输入Markdown内容', 'error');
                return;
            }

            const result = MarkdownPreview.exportToHTML(content);
            if (result.success) {
                this.downloadFile(result.data.html, result.data.filename, 'text/html');
                DevToolsUtils.showToast('HTML文件已导出', 'success');
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        });

        // 复制HTML
        copyHtmlBtn.addEventListener('click', () => {
            const content = markdownInput.value.trim();
            if (!content) {
                DevToolsUtils.showToast('请输入Markdown内容', 'error');
                return;
            }

            const result = MarkdownPreview.parseMarkdown(content);
            if (result.success) {
                DevToolsUtils.copyToClipboard(result.data.html);
                DevToolsUtils.showToast('HTML代码已复制', 'success');
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        });

        // 清空按钮
        clearBtn.addEventListener('click', () => {
            markdownInput.value = '';
            markdownInputSplit.value = '';
            previewDiv.innerHTML = '';
            previewDivSplit.innerHTML = '';
            this.hideAllSections();
            this.updateStats(0, 1);
        });

        // 初始更新统计
        this.updateStats(0, 1);

        // 初始化 Feather Icons
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }

    static switchView(viewType) {
        const tabEditBtn = document.getElementById('tab-edit');
        const tabPreviewBtn = document.getElementById('tab-preview');
        const tabSplitBtn = document.getElementById('tab-split');
        const editView = document.getElementById('edit-view');
        const previewView = document.getElementById('preview-view');
        const splitView = document.getElementById('split-view');

        // 重置按钮样式
        [tabEditBtn, tabPreviewBtn, tabSplitBtn].forEach(btn => {
            btn.className = 'px-4 py-2 rounded-md transition duration-200 font-medium text-sm text-gray-600 hover:text-gray-900';
        });

        // 隐藏所有视图
        editView.classList.add('hidden');
        previewView.classList.add('hidden');
        splitView.classList.add('hidden');

        // 显示选中视图
        switch (viewType) {
            case 'edit':
                editView.classList.remove('hidden');
                tabEditBtn.className = 'px-4 py-2 rounded-md transition duration-200 font-medium text-sm bg-emerald-600 text-white';
                break;
            case 'preview':
                previewView.classList.remove('hidden');
                tabPreviewBtn.className = 'px-4 py-2 rounded-md transition duration-200 font-medium text-sm bg-emerald-600 text-white';
                break;
            case 'split':
                splitView.classList.remove('hidden');
                tabSplitBtn.className = 'px-4 py-2 rounded-md transition duration-200 font-medium text-sm bg-emerald-600 text-white';
                // 同步内容并开始实时预览
                const content = document.getElementById('markdown-input').value;
                document.getElementById('markdown-input-split').value = content;
                this.updateSplitPreview(content);
                break;
        }

        // 更新当前视图
        window.currentView = viewType;
    }

    static updateSplitPreview(content) {
        const previewDivSplit = document.getElementById('markdown-preview-split');
        const result = MarkdownPreview.parseMarkdown(content);
        if (result.success) {
            previewDivSplit.innerHTML = result.data.html;
            this.updateStats(result.data.wordCount, result.data.readingTime);
        }
    }

    static updateStats(wordCount, readingTime) {
        document.getElementById('word-count').textContent = wordCount.toLocaleString();
        document.getElementById('reading-time').textContent = readingTime;
    }

    static displayTOC(headings) {
        const tocSection = document.getElementById('toc-section');
        const tocContent = document.getElementById('toc-content');

        if (headings.length === 0) {
            tocContent.innerHTML = '<p class="text-gray-500">文档中没有找到标题</p>';
        } else {
            let html = '<ul class="space-y-2">';
            headings.forEach(heading => {
                const indent = (heading.level - 1) * 20;
                html += `
                    <li style="margin-left: ${indent}px;">
                        <a href="#${heading.id}" class="text-emerald-600 hover:text-emerald-800 text-sm">
                            ${'#'.repeat(heading.level)} ${heading.text}
                            <span class="text-gray-400 text-xs ml-2">行 ${heading.line}</span>
                        </a>
                    </li>
                `;
            });
            html += '</ul>';
            tocContent.innerHTML = html;
        }

        tocSection.classList.remove('hidden');

        // 更新图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 50);
    }

    static displayValidationResult(validationData) {
        const validationSection = document.getElementById('validation-section');
        const validationContent = document.getElementById('validation-content');

        const { isValid, warnings, summary } = validationData;

        let html = `
            <div class="mb-4 p-4 rounded-lg ${isValid ? 'bg-green-50 border border-green-200' : 'bg-yellow-50 border border-yellow-200'}">
                <div class="flex items-center">
                    <i data-feather="${isValid ? 'check-circle' : 'alert-triangle'}" class="w-5 h-5 ${isValid ? 'text-green-600' : 'text-yellow-600'} mr-2"></i>
                    <span class="font-medium ${isValid ? 'text-green-800' : 'text-yellow-800'}">${summary}</span>
                </div>
            </div>
        `;

        if (warnings.length > 0) {
            html += `
                <div class="space-y-3">
                    ${warnings.map(warning => `
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <div class="flex items-start justify-between">
                                <div>
                                    <span class="font-medium text-yellow-800">${warning.message}</span>
                                    <div class="text-sm text-yellow-600 mt-1">类型: ${warning.type}</div>
                                </div>
                                <span class="text-yellow-500 text-sm">行 ${warning.line}</span>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        validationContent.innerHTML = html;
        validationSection.classList.remove('hidden');

        // 更新图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 50);

        // 滚动到验证结果
        validationSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    static hideAllSections() {
        document.getElementById('toc-section').classList.add('hidden');
        document.getElementById('validation-section').classList.add('hidden');
    }

    static loadExample() {
        const example = `# Markdown 预览器使用指南

欢迎使用 **Markdown 预览器**！这是一个功能强大的在线Markdown编辑和预览工具。

## ✨ 主要特性

- 🎯 **实时预览**：支持编辑、预览、分屏三种模式
- 📝 **语法支持**：支持GitHub风格的Markdown语法
- 📋 **模板库**：内置README、API文档、博客等常用模板
- 🔍 **语法验证**：检查Markdown语法错误
- 📑 **目录生成**：自动生成文档目录结构
- 💾 **导出功能**：支持导出HTML文件

## 🚀 快速开始

### 基础使用步骤

1. 在编辑器中输入Markdown内容
2. 点击 **预览** 按钮查看渲染效果
3. 使用 **分屏** 模式进行实时预览
4. 点击 **导出HTML** 保存为文件

#### 进阶功能

- 使用模板快速创建文档
- 语法验证确保内容正确
- 目录生成帮助导航

##### 小贴士

使用 \`Ctrl+Enter\` 快捷键快速预览内容。

###### 注意事项

保存重要内容时记得备份。

## 📖 语法示例

### 代码示例

#### JavaScript 代码

\`\`\`javascript
function greet(name) {
    return \`Hello, \${name}!\`;
}

console.log(greet('Markdown'));
\`\`\`

#### Python 代码

\`\`\`python
def calculate_sum(a, b):
    """计算两个数的和"""
    return a + b

result = calculate_sum(5, 3)
print(f"结果是: {result}")
\`\`\`

#### C# 代码

\`\`\`csharp
using System;

public class Calculator
{
    public static int Add(int a, int b)
    {
        return a + b;
    }
    
    public static void Main()
    {
        int result = Add(5, 3);
        Console.WriteLine($"结果是: {result}");
    }
}
\`\`\`

#### Go 代码

\`\`\`go
package main

import "fmt"

func add(a, b int) int {
    return a + b
}

func main() {
    result := add(5, 3)
    fmt.Printf("结果是: %d\\n", result)
}
\`\`\`

#### SQL 代码

\`\`\`sql
SELECT 
    u.name,
    u.email,
    COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.active = 1
GROUP BY u.id, u.name, u.email
ORDER BY order_count DESC;
\`\`\`

#### 内联代码

在文本中使用 \`console.log()\` 函数输出信息，或者 \`System.Console.WriteLine()\` 在C#中。

### 表格

| 功能 | 状态 | 说明 |
|------|------|------|
| 预览 | ✅ | 实时预览 |
| 导出 | ✅ | HTML格式 |
| 模板 | ✅ | 多种模板 |

### 引用

> 这是一个引用块的示例
> 
> 支持多行引用内容

---

**提示**：尝试切换到不同的视图模式，体验最佳的编辑体验！`;

        document.getElementById('markdown-input').value = example;
        document.getElementById('markdown-input-split').value = example;
    }

    static downloadFile(content, filename, mimeType) {
        const blob = new Blob([content], { type: mimeType });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    }
};